<template>
	<view class="page" :style="{'overflow':show?'hidden':''}">
		<scroll-view scroll-y="true" class="scroll-Y" :key="1" v-if="!show">
			<view class="context">
				<view class="title">
					<text class="title_left">描述</text>
					<text class="title_right" @click="incantation">咒语生成器</text>
				</view>
				<!--        -->
				<!--   <view class="context-tip">
          <view class="context-tip-left">
            <text class="context-tip-left-tip">*</text>
          </view>
        </view> -->
				<view class="context-textarea">
					<textarea :value="writing" placeholder="请输入描述画面内容，描述的形式：（主语）、（细节设定）、（修饰语或者艺术家）。例如：白狐、梦幻修饰、手绘头像..."
						placeholder-style="color:#999999;font-size:24rpx" @input="changeValue" :maxlength="1000"
						class="context-textarea-input"></textarea>
				<!-- 	<view class="context-textarea-txt" @click="clear">清除文本</view> -->
					<view class="context-textarea-max">{{writing.length}}/1000</view>
				</view>
				<view class="scroll-container">
					<scroll-view scroll-x class="scroll-view-content">
						<text class="bottom_t">示例：</text>
						<view class="scroll-item" @click="select">春天的田野</view>
						<view class="scroll-item" @click="select1">夜晚的星空</view>
						<view class="scroll-item" @click="select2">夏天、森林、绿</view>
						<view class="scroll-item" @click="select3">清晨的芦苇丛</view>
					</scroll-view>
				</view>
				<!--        -->
				<view class="context-title">
					<text style="font-weight: 900;">风格</text>
					<text class="context-title-tip"></text>
				</view>
				<view class="context-tone">
					<div class="content-tones">
						<view class="context-tone-item" v-for="(item,index) in toneList" :key="index"
							@click="changeTone(item,index)" :class="{'context-tone-item-select':index==toneIndex}">
							<image style="width:193.24rpx;height:193.24rpx;margin-top:8rpx;margin-right:24rpx"
								:src="item.src">
							</image>
							<view style="margin-top:18rpx;margin-right:20rpx">{{item.text}}</view>
						</view>
					</div>
				</view>

				<view class="context-tone">
					<div class="content-tones">
						<view class="context-tone-item" v-for="(item,index) in toneLists" :key="index"
							@click="changeTones(item,index)" :class="{'context-tone-item-select':index==toneIndexs}">
							<image style="width:193.24rpx;height:193.24rpx;margin-top:8rpx;margin-right:24rpx"
								:src="item.src">
							</image>
							<view style="margin-top:18rpx;margin-right:20rpx">{{item.text}}</view>
						</view>
					</div>
				</view>
				<!--        -->
				<!--        -->
				<view class="context-title">
					<text style="font-weight: 900;">图片比例</text>
					<text class="context-title-tip"></text>
				</view>
				<view class="context-draw">
					<view class="context-draw-item" v-for="(item,index) in styleList" :key="index"
						@click="changeStyle(item,index)" :class="{'context-draw-item-select':index==styleIndex}">
						<view style="margin-top:20rpx">
							<view class="square-box" v-if="index === 0" :class="{'selected': index==styleIndex}"></view>
							<view class="square-box_unselected" v-if="index === 1"
								:class="{'selected': index==styleIndex}"></view>
							<view class="square-box_unselecteds" v-if="index === 2"
								:class="{'selected': index==styleIndex}"></view>
							<text>
								{{item.text}}
							</text>
						</view>
						<view style="margin-top:20rpx">
							{{item.size}}
						</view>
					</view>
				</view>
				<!--        -->
				<!--        -->
				<view class="placeholder"></view>
				<view class="btn">
					<view class="button" @click="create"
						:style="{'background-color':(writing.length>0)?'rgb(52, 116, 255)':'rgba(163, 201, 255,.6)'}">
						生成作品</view>
					<view style="height: 80rpx"></view>
				</view>
			</view>
		</scroll-view>
		<view class="page-view" v-if="show" :key="2">
			<view class="answer">
				<view class="answer-textarea">
					<img class="answer-textarea-img" :src="creativeResult" alt="">
				</view>
				<view class="answer-value">提示词</view>
				<view class="answer-value">
					{{title?title:writing}}
				</view>
			</view>
			<view class="tabbar">
				<view class="tabbar-item" @click="clickTab(item,index)" v-for="(item, index) in tabbarList"
					:key="index">
					<!-- <view>
            <image style="width: 38rpx;height: 38rpx;margin-top:8rpx" :src="item.src"></image>
          </view> -->
					<view>{{item.text}}</view>
				</view>
			</view>
		</view>
		<!--  进度条  -->
		<view class="schedule-page" v-if="scheduleShow">
			<view class="schedule-box">
				<view class="schedule-text">{{text}}</view>
				<view class="lineBox">
					<view class="lineAnimation" v-for="(item,index) in arrIndex" :key="index"
						:style="{'width':item.width+'%'}">
						<view v-if="item.widthChildren>0" class="lineAnimation-children"
							:style="{'width':item.widthChildren+'%'}">
						</view>
					</view>
				</view>
				<view class="schedule-number">{{schedule}}%</view>
			</view>
		</view>
		<view>
			<custom-dialog :show="showDialog" @confirm="onDialogConfirm" @cancel="onDialogCancel"></custom-dialog>
		</view>
	</view>
</template>
<script>
	import cryptoJs from '@/utils/encryptDES.js'
	// import CustomDialog from '../customDialog/index.vue'
	import {
		original,
		originalIos,
		apiMixin
	} from '@/utils/originalDraw.js'

	export default {
		mixins: [apiMixin],
		// components: {
		//   CustomDialog
		// },
		data() {
			return {
				isVip: true,
				showDialog: false,
				toneIndex: 0,
				toneIndexs: 10,
				toneLists: [{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/10.png',
						text: '怪兽风格',
						style: '202'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/11.png',
						text: '游戏卡通手绘',
						style: '301'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/12.png',
						text: '概念艺术',
						style: '102'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/13.png',
						text: '水彩画',
						style: '104'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/14.png',
						text: '插图',
						style: '107'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/15.png',
						text: '印象派',
						style: '109'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/17.png',
						text: '肖像画',
						style: '111'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/16.png',
						text: '赛博朋克',
						style: '113'
					},
				],
				toneList: [{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/0.png',
						text: '不限定',
						style: '401'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/2.png',
						text: '日系动漫',
						style: '201'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/1.png',
						text: '水墨',
						style: '101'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/3.png',
						text: '油画',
						style: '103'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/4.png',
						text: '厚涂',
						style: '106'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/6.png',
						text: '剪纸风格',
						style: '108'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/7.png',
						text: '2.5D人物',
						style: '110'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/8.png',
						text: '黑白素描',
						style: '112'
					},
					{
						src: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/aixz/18.png',
						text: '科幻风格',
						style: '114'
					}
				],
				styleIndex: 0,
				styleList: [{
						text: '方图',
						size: '768:768',
					},
					{
						text: '竖图',
						size: '768:1024',
					},
					{
						text: '横图',
						size: '1024:768',
					},
				],
				exampleIndex: 0,
				exampleList: [{
						text: '春天的田野',
					},
					{
						text: '夜晚的星空',
					},
					{
						text: '夏天、森林、绿',
					},
					{
						text: '清晨的芦苇丛',
					},
				],
				show: false,
				message: '',
				languageItem: '科幻/奇幻',
				toneItem: '不限定',
				styleItem: '768:768', //默认生成图片的尺寸
				style: '102', //生成图片的风格
				writing: '',
				title: '',
				outline: '',
				tabbarList: [{
						//   src: '/static/create/create_continue1.png',
						text: '保存到本地'
					},
					// {
					//   src: '/static/create/create_copy1.png',
					//   text: '复制文本'
					// }
				],
				creativeResult: '',
				creativeResults: '',
				compareResults: '',
				originality: '',
				aiLevel: 0,
				width: 0,
				arrIndex: [],
				widthIndex: 0,
				schedule: 0,
				text: '创作中,请稍后',
				scheduleShow: false
			}
		},
		onShow() {},
		onLoad(option) {
			console.log(option, '这是传递的参数')

			if (option.title) {
				
				this.writing = JSON.parse(option.title)
				}
		},
		methods: {
			incantation() {
				uni.navigateTo({
					url: '../incantition/incantition'
				})
			},

			changeLanguage(item, index) {
				this.languageIndex = index
				this.languageItem = item.text
			},
			changeStyle(item, index) {
				this.styleIndex = index
				this.styleItem = item.size
			},
			changeTone(item, index) {
				console.log(item.style)
				this.style = item.style
				this.toneIndex = index
				this.toneItem = item.text
				this.toneIndexs = 20
			},
			changeTones(item, index) {
				console.log(item.style)
				this.toneIndex = 20
				this.style = item.style
				this.toneIndexs = index
				this.toneItem = item.text
			},
			select(item, index) {
				this.writing = '春天的田野'
				//   this.styleIndex = 0
				//   this.toneItem = '日系动漫'
			},
			select1(item, index) {
				this.writing = '夜晚的星空'
				//   this.styleIndex = 1
				//   this.toneItem = '水墨'
			},
			select2(item, index) {
				this.writing = '夏天、森林、绿'
				//   this.styleIndex = 2
				//   this.toneItem = item.text
			},
			select3(item, index) {
				this.writing = '清晨的芦苇丛'
				//   this.styleIndex = 1
				//   this.toneItem = item.text
			},
			// clear() {
			// 	console.log('11111')
			// 	this.writing = ''
			// },
			changeOutline(e) {
				this.outline = e.detail.value
			},
			changeMessage(e) {
				this.message = e.detail.value
			},
			changeTitle(e) {
				this.title = e.detail.value
			},
			changeValue(e) {
				this.writing = e.detail.value
			},
			async create() {

				if (!this.writing) {
					uni.showToast({
						title: '请输入小说内容关键词',
						icon: 'none',
						duration: 2000,
					});
					return
				}
			
				let title = this.writing.toString()
					console.log(title.replace(/,/g, ""),'这会个深刻按揭贷款')
				let param = {
					"prompt":title,
					// "styles": `${this.toneItem}`,
					"resolution": this.styleItem,
					"styles":this.style,
					// "resolution": "768:768"
				};
				let frequency = uni.getStorageSync('frequency')
				// 判断是否是安卓设备，如果是，调用安卓方法获取用户信息的方法getUserInfo，然后进行创作
				//   var isAndroidNativeApp = /android/gi.test(navigator.userAgent) && /native_app/gi.test(navigator.userAgent);
				// var isWeChatMiniProgram = /MicroMessenger/gi.test(navigator.userAgent) && /miniprogram/gi.test(navigator.userAgent);
				//   var isEquipment = navigator.userAgent.toLowerCase()
				// const andord = parseUrlParams(window.location.href)

				// console.log('在浏览器中打开页面');
				this.highCreate(param);
			},

			a() {
				const imageUrl =
					"https://aiart-1258344699.cos.ap-guangzhou.myqcloud.com/text_to_img/3920eb7d-4e07-4e50-8522-db3c23fadf01-1301524251.jpg?q-sign-algorithm=sha1&q-ak=AKIDpRovliU1IJ5ctufBSVIq8AwTlnZ5MN8d&q-sign-time=1690957175%3B1690960775&q-key-time=1690957175%3B1690960775&q-header-list=host&q-url-param-list=&q-signature=3be7113dc977f2901dc415837f2b7e72847e964b"
				this.saveImageToAlbum(imageUrl)
			},
			saveImageToAlbum(imageUrl) {
				const image = new Image();
				image.crossOrigin = 'anonymous';

				image.onload = function() {
					const canvas = document.createElement('canvas');
					const context = canvas.getContext('2d');
					canvas.width = image.width;
					canvas.height = image.height;
					context.drawImage(image, 0, 0);

					const link = document.createElement('a');
					link.href = canvas.toDataURL('image/jpeg');
					link.download = 'image.jpg';

					const clickEvent = document.createEvent('MouseEvent');
					clickEvent.initEvent('click', true, true);
					link.dispatchEvent(clickEvent);
				};

				image.src = imageUrl;
			},

			clickTab(item, index) {
				if (index == 0) {
					// this.show = false
					// window.location.href = this.creativeResult;
					uni.downloadFile({
						//url: this.creativeResult,
						url: this.creativeResult,
						success: (res) => {
							console.log("🚀 ~ file: AiDraw.vue:413 ~ clickTab ~ res:", res)
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: () => {
										uni.showToast({
											title: '保存成功',
											icon: 'success',
										});
									},
									fail: () => {
										uni.showToast({
											title: '保存失败',
											icon: 'none',
										});
									},
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '下载失败',
								icon: 'none',
							});
						},
					});
				} else {
					let text = this.creativeResult
					// #ifdef H5
					let textarea = document.createElement("textarea")
					textarea.value = text
					textarea.readOnly = "readOnly"
					document.body.appendChild(textarea)
					textarea.select() // 选中文本内容
					textarea.setSelectionRange(0, text.length)
					uni.showToast({ //提示
						title: '复制成功',
						icon: 'success'
					})
					document.execCommand("copy")
					textarea.remove()
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: text, //要被复制的内容
						success: () => { //复制成功的回调函数
							uni.showToast({ //提示
								title: `复制成功`,
								icon: 'success'
							})
						}
					}, true);
					// #endif

				}
			},
		},

	}
</script>
<style lang="less">
	.page {
		width: 100%;
		height: calc(100vh);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("https://www.qianfanwanmu.com/extra/addExtra/1687680890773.png");
	}

	.scroll-Y {
		width: 100%;
		height: 100%;
	}

	.page-view {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 100%;
		height: 80rpx;
		margin: 10px 0 0 -20px;
		box-sizing: border-box;
		//   padding: 0rpx 40rpx;
		padding-left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		//   background-color: rgba(211, 238, 255, 0.5);
		font-size: 24rpx;
		color: #666666;

		.title_left {
			height: 27rpx;
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.title_right {
			width: 205rpx;
			height: 66rpx;
			line-height: 66rpx;
			background: #3787FF;
			border-radius: 24rpx;
			display: flex;
			justify-content: center;
			color: white;
		}
	}

	.context {
		width: 90%;
		margin: 0rpx auto;

		.context-tone {
			width: 100%;
			display: flex;
			overflow-x: auto;

			/* 允许横向滚动 */
			.context-tone-item {
				//   padding: 12rpx 14rpx;
				border-radius: 24rpx;
				font-size: 22rpx;
				//   margin: 5px 0 0 8.3px;
				color: #333333;
				text-align: center;
				opacity: 0.5;
			}

			.context-tone-items {
				//   padding: 12rpx 14rpx;
				border-radius: 24rpx;
				font-size: 22rpx;
				//   margin: 5px 0 0 8.3px;
				color: #333333;
				text-align: center;
				opacity: 0.5;
			}

			.context-tone-item-select {
				opacity: 1;
			}

			.context-tone-item-selects {
				opacity: 1;
			}
		}

		.content-tones {
			display: flex;
			// flex-wrap: wrap;
		}

		.context-draw {
			width: 100%;
			display: flex;

			// flex-wrap: wrap;
			.context-draw-item {
				width: 214rpx;
				height: 155rpx;
				background: #f7f7f7;
				border-radius: 24rpx;
				border-radius: 24rpx;
				font-size: 22rpx;
				margin: 5px 21rpx 0 0;
				color: #333333;
				text-align: center;
			}

			.context-draw-item-select {
				background-color: #3474FF;
				color: #fff;
				border: 1px solid #3474FF;
			}
		}

		.square-box {
			width: 48rpx;
			height: 48rpx;
			border: 1px solid #000;
			border-radius: 6rpx;
			display: inline-block;
			margin: 10rpx 10px 0 0;
		}

		.square-box_unselected {
			width: 39rpx;
			height: 51rpx;
			border: 1px solid #000;
			border-radius: 6rpx;
			display: inline-block;
			margin: 10rpx 10px 0 0;
		}

		.square-box_unselecteds {
			width: 64rpx;
			height: 40rpx;
			border: 1px solid #000;
			border-radius: 6rpx;
			display: inline-block;
			margin: 10rpx 10px 0 0;
		}

		.selected {
			border: 1px solid #f7f7f7;
			/* 设置选中时的边框颜色 */
		}

		.context-tip {
			width: 100%;
			height: 90rpx;
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.context-tip-left {
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;

				/deep/.context-tip-left-tip span {
					color: red;
					margin-left: 6rpx;
					vertical-align: sub;
				}
			}

			.context-tip-right {
				color: #999999;
				font-size: 24rpx;
			}
		}

		.context-title {
			width: 100%;
			height: 90rpx;
			font-size: 30rpx;
			color: #333333;
			margin-top: 10px;
			display: flex;
			align-items: center;

			/deep/.context-title-tip span {
				color: red;
				margin-left: 6rpx;
				vertical-align: sub;
			}
		}

		.context-textarea {
			width: 100%;
			height: 240rpx;
			border: 1px solid #3f96f7;
			border-radius: 24rpx;
			position: relative;

			.context-textarea-input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 22rpx 30rpx 0 30rpx;
				color: #000000;
				font-size: 28rpx;
			}

			.context-textarea-max {
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
				color: #999999;
			}

			.context-textarea-txt {
				position: absolute;
				left: 40rpx;
				bottom: 28rpx;
				height: 21rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.scroll-container {
			width: 97%;
			margin: 20rpx;
			overflow: hidden;
		}

		.scroll-view-content {
			white-space: nowrap;
		}

		.scroll-item {
			display: inline-block;
			margin-right: 10rpx;
			text-align: center;
			height: 38rpx;
			border-radius: 6rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-left: 15rpx;
			padding: 5rpx 10rpx;
		}

		.bottom_t {
			width: 50rpx;
			height: 21rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.button {
			width: 90%;
			height: 90rpx;
			background-color: rgba(52, 116, 255, 0.3);
			border-radius: 60rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 30rpx;
			margin: 40rpx auto 30rpx;
		}
	}

	.btn {
		display: flex;
		position: fixed;
		flex-direction: row;
		//   background-color: rgba(211, 238, 255, 1);
		border-radius: 25px 25px 0 0;
		width: 100%;
		bottom: 0px;
		z-index: 99;
		margin-left: -20px;
	}

	.placeholder {
		height: 50%;
		padding-bottom: 200rpx;
	}

	.answer {
		width: 90%;
		margin: 0px auto;
		height: 90%;

		.answer-fontLength {
			width: 100%;
			height: 60rpx;
			color: #999999;
			font-size: 30rpx;
			// display: flex;
			// align-items: center;
			//padding-left: 520rpx;
			position: absolute;
			left: 76%;
		}

		.answer-value {
			width: 100%;
			height: 100rpx;
			color: #333333;
			font-size: 44rpx;
			line-height: 100rpx;
			// display: flex;
			// align-items: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.answer-textarea {
			width: 100%;
			height: 70%;
			margin-bottom: 160rpx;
			// background-color: #F7F7F7;
			// border: 1px solid #3f96f7;
			border-radius: 24rpx;

			.answer-textarea-input {
				width: 100%;
				height: 96%;
				box-sizing: border-box;
				padding: 30rpx 30rpx 20rpx;
				color: #333333;
				font-size: 28rpx;
			}

			.answer-textarea-img {
				width: 100%;
				height: 100%;
				margin-top: 20%;
			}
		}
	}

	.tabbar {
		width: 100%;
		//   height: 10%;
		//   background-color: #fff;
		display: flex;
		box-sizing: border-box;
		justify-content: center;

		//   border-top: 1rpx solid #e5dbdb;
		.tabbar-item {
			width: 33.33%;
			height: 68.84rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// flex-direction: column;
			font-family: PingFang SC;
			padding: 0 40rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 36rpx;
			font-size: 24rpx;
			border: solid 2rpx;
			margin: 0 12rpx;
			background: #3474ff;
			border-radius: 34rpx;
		}
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.schedule-page {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(128, 126, 126, 0.8);
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.schedule-box {
		width: 62%;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.schedule-text {
		text-align: center;
		line-height: 120rpx;
	}

	.schedule {
		width: 100%;
		height: 20rpx;
		margin: 20rpx 0rpx;
	}

	.schedule-number {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2979ff;
	}

	.lineBox {
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin: 0px auto;
		height: 12rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.lineAnimation {
		height: 100%;
		background-color: #bbb9b9;
	}

	.lineAnimation-children {
		height: 100%;
		transition: all 0.5s;
		background-color: #2979ff;
	}

	.baifenbizdy {
		color: skyblue;
		font-size: 22px;
		align-items: center;
		justify-content: center;
		display: flex;
		margin-top: 7%;
	}

	.isshow {
		background-color: #fff;
		border-radius: 10px;
		width: 90%;
		height: 190px;
		left: 5%;
		position: relative;
		top: -70%;
		font-size: 50px;
		z-index: 10086;
		color: #1890ff;
		padding: 40px 0 0 0;
	}

	.box {
		width: 880px;
		background: #ffffff;
		position: relative;
		// height: 640px;
	}

	.textzdy {
		display: flex;
		font-size: 22px;
		margin: auto;
		color: grey;
		align-items: center;
		justify-content: center;
		padding-top: 2%;
	}

	.container {
		width: 90%;
		height: 7px;
		background-color: #fafafc;
		border-radius: 15px;
		margin-left: 5%;
		margin-top: 8%;
	}

	/* 内部加载部分样式 */
	.contentzdy {
		width: 100%;
		height: 7px;
		border-radius: 15px;
		background-color: #1890ff;
		text-align: center;
		line-height: 10px;
	}

	.jindu {
		margin-top: 1px;
	}
</style>